From 22ade2d916ff27ed9c468554a85e6df08322b9fa Mon Sep 17 00:00:00 2001 From: Stephane Bisson Date: Tue, 3 Oct 2017 11:29:04 -0400 Subject: [PATCH] RCFilters: Init highlight button based on model state Bug: T177028 Change-Id: Idea7e09152e3176084f0634d24615a79364d77bb --- .../ui/mw.rcfilters.ui.FilterItemHighlightButton.js | 6 ++++-- .../ui/mw.rcfilters.ui.HighlightColorPickerWidget.js | 9 +++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js index 7426123626..c840d7c00b 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemHighlightButton.js @@ -33,13 +33,15 @@ this.model = model; // Event - this.model.connect( this, { update: 'onModelUpdate' } ); + this.model.connect( this, { update: 'updateUiBasedOnModel' } ); this.colorPickerWidget.connect( this, { chooseColor: 'onChooseColor' } ); // This lives inside a MenuOptionWidget, which intercepts mousedown // to select the item. We want to prevent that when we click the highlight // button this.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } ); + this.updateUiBasedOnModel(); + this.$element .addClass( 'mw-rcfilters-ui-filterItemHighlightButton' ); }; @@ -60,7 +62,7 @@ /** * Respond to item model update event */ - mw.rcfilters.ui.FilterItemHighlightButton.prototype.onModelUpdate = function () { + mw.rcfilters.ui.FilterItemHighlightButton.prototype.updateUiBasedOnModel = function () { var currentColor = this.model.getHighlightColor(), widget = this; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js index 570647e68a..ad3b304851 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.HighlightColorPickerWidget.js @@ -24,7 +24,7 @@ this.controller = controller; this.model = model; - this.currentSelection = ''; + this.currentSelection = 'none'; this.buttonSelect = new OO.ui.ButtonSelectWidget( { items: colors.map( function ( color ) { return new OO.ui.ButtonOptionWidget( { @@ -39,12 +39,13 @@ } ), classes: 'mw-rcfilters-ui-highlightColorPickerWidget-buttonSelect' } ); - this.selectColor( 'none' ); // Event - this.model.connect( this, { update: 'onModelUpdate' } ); + this.model.connect( this, { update: 'updateUiBasedOnModel' } ); this.buttonSelect.connect( this, { choose: 'onChooseColor' } ); + this.updateUiBasedOnModel(); + this.$element .addClass( 'mw-rcfilters-ui-highlightColorPickerWidget' ) .append( @@ -73,7 +74,7 @@ /** * Respond to item model update event */ - mw.rcfilters.ui.HighlightColorPickerWidget.prototype.onModelUpdate = function () { + mw.rcfilters.ui.HighlightColorPickerWidget.prototype.updateUiBasedOnModel = function () { this.selectColor( this.model.getHighlightColor() || 'none' ); }; -- 2.20.1